<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 24px;
        }

        #loginPanal {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 460px;
            height: 340px;
            margin: -170px 0 0 -230px;
            border: 1px solid;
        }

        .inputPanal {
            margin: 10px;
            width: 94%;
            height: 48px;
        }

        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 6px 6px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
    </style>
</head>

<body>

    <div id="loginPanal">
        <div class="inputPanal"><label for="email" style="width: 10%;;">邮 箱 <input id="email" type="text"
                    style="width: 80%;"></label></div>
        <div class="inputPanal"><label for="passwd" style="width: 10%">密 码 <input id="passwd" type="password"
                    style="width: 80%;"></label></div>
        <div class="inputPanal"><label for="confPasswd" style="width: 20%">确认密码 <input id="confPasswd" type="password"
                    style="width: 70%;"></label></div>
        <div class="inputPanal"><label for="confCode" style="width: 10%">验证码 <input id="confCode" type="password"
                    style="width: 65%;"></label><span id="getCode" style="font-size: 12px; color: green;"> 获取验证码</span>
        </div>
        <div class="inputPanal"><button id="registBtn" style="width: 100%;">注 册</button></div>
    </div>

    <script>
        $(function () {

            function registe(email, passwd, confCode) {
                $.ajax({
                    url: "/api/user/register/" + email + "/" + passwd + "/" + confCode,
                    // data: { "email": email, "password": passwd, "code": confCode },
                    contentType: "application/json",
                    // dataType: "json",
                    method: "GET",
                    success: (data) => {
                        // 0 表示注册成功
                        if (data == "0") {
                            window.location.href = "./login.html"
                        } else if (data == "1") {
                            alert("验证码错误")
                        } else if (data == "2") {
                            alert("验证码超时")
                        } else {
                            alert("请重试")
                        }
                    }
                })
            }

            // 发送邮件
            function sendEmail(email) {
                $.ajax({
                    url: "/api/code/create/" + email,
                    contentType: "application/json",
                    // dataType: "json",
                    method: "GET",
                    success: (data) => {
                        if (data) {
                            alert("验证码发送成功")
                        } else {
                            alert("邮件发送失败")
                        }
                    }
                })
            }
            // 注册
            $("#registBtn").on('click', () => {
                var email = $("#email").val();
                var passwd = $("#passwd").val();
                var confPasswd = $("#confPasswd").val();
                var confCode = $("#confCode").val();
                if (email === "") {
                    alert("邮箱不能为空")
                } else if (passwd === "") {
                    alert("请输入密码")
                } else if (confPasswd === "") {
                    alert("请确认密码")
                } else if (passwd !== confPasswd) {
                    alert("两次输入的密码不一致")
                } else if (confCode === "") {
                    alert("请输入验证码");
                } else {
                    registe(email, passwd, confCode);
                }

            })

            // 获取验证码    
            var lastGetCodeTime = 0;
            $("#getCode").on('click', () => {

                var email = $("#email").val();
                if (email === "") {
                    alert("邮箱不能为空")
                } else {
                    // 先判定邮箱是否已经注册过
                    $.ajax({
                        url: "/api/user/isRegistered/" + email,
                        contentType: "application/json",
                        // dataType: "json",
                        method: "GET",
                        success: (data) => {
                            if (data == true) {
                                alert("已经注册过啦，请登录")
                                window.location.href = "./login.html";
                            } else {
                                var current = Date.now();
                                // 如果上次获取验证码时间小于 1 分钟，则不能获取
                                if (current - lastGetCodeTime < 60 * 1000) {
                                    var coldTime = Math.ceil((60 * 1000 - (current - lastGetCodeTime)) / 1000);
                                    alert("操作频繁，请" + coldTime + "s后再获取")
                                } else {
                                    sendEmail(email);
                                }
                                lastGetCodeTime = current;
                            }
                        }
                    });
                }

            })

        })
    </script>
</body>

</html>